<template>
  <div class="subject-box">
    <Header></Header>
    <div class="wind-1240">
      <div class="title-bar">
        {{ title }}
        <el-button @click="$router.push('/')" color="#8FBB63" :dark="true">
          返回首页
        </el-button>
      </div>
      <div class="cloud-disk-box">
        <div class="wind-1240 cloud-disk">
          <div class="displayFlex2">
            <!-- 左边菜单显示区域begin -->
            <div class="serach cloud-disk-left">
              <ul class="nav-list">
                <li
                  v-for="(item, index) in tabsList"
                  :key="item.key"
                  @click="handleLeftNav(index, item)"
                  :class="[
                    'nav-item',
                    item.key === currentNavIndex ? 'nav-item-active' : '',
                  ]"
                >
                  <img
                    :src="
                      item.key === currentNavIndex ? item.actIcon : item.icon
                    "
                    alt=""
                  />
                  <span>{{ item.label }}</span>
                </li>
              </ul>
            </div>

            <!--  右边文件显示区域 begin -->
            <div class="cloud-disk-right" v-if="details">
              <TeachingVideos
                :data="details.teachingVideo"
                :courseware="details.courseware"
                v-if="currentNavIndex === 'TeachingVideos'"
              />
              <TeachingCase
                :data="details.teachingCase"
                v-if="currentNavIndex === 'TeachingCase'"
              />
              <IdeologicalCourse
                :data="details.ideologicalCourse"
                v-if="currentNavIndex === 'IdeologicalCourse'"
              />
              <MappinKnowledge
                :data="details.mappinKnowledge"
                v-if="currentNavIndex === 'MappinKnowledge'"
              />
              <Exercises
                :data="details?.exercises"
                v-if="currentNavIndex === 'Exercises'"
              />
            </div>
            <!-- 右边文件显示区域 end -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Header from "../components/common/Header.vue";
import TeachingVideos from "../components/subject/TeachingVideos.vue";
import TeachingCase from "../components/subject/TeachingCase.vue";
import IdeologicalCourse from "../components/subject/IdeologicalCourse.vue";
import MappinKnowledge from "../components/subject/MappinKnowledge.vue";
import Exercises from "../components/subject/Exercises.vue";

import { onMounted, ref } from "vue";
import { getDetails } from "../utils/api/courseManage";
const tabsList = ref([
  {
    label: "教学视频",
    key: "TeachingVideos",
    component: "TeachingVideos",
    icon: "jxsp",
    actIcon: "jxsp-act",
  },
  {
    label: "案例教学",
    key: "TeachingCase",
    component: "TeachingCase",
    icon: "aljx",
    actIcon: "aljx-act",
  },
  {
    label: "课程思政",
    key: "IdeologicalCourse",
    component: "IdeologicalCourse",
    icon: "kcsz",
    actIcon: "kcsz-act",
  },
  {
    label: "知识图谱",
    key: "MappinKnowledge",
    component: "MappinKnowledge",
    icon: "zstp",
    actIcon: "zstp-act",
  },
  {
    label: "习题",
    key: "Exercises",
    component: "Exercises",
    icon: "xt",
    actIcon: "xt-act",
  },
]);

let route = useRoute();
let { id, title, tabs } = route.params;
const currentNavIndex = ref("TeachingVideos");

/**
 * 左导航切换事件
 */
function handleLeftNav(index, item) {
  //当前导航下标
  currentNavIndex.value = item.key;
}
const loadImage = async () => {
  const images = import.meta.glob("/public/img/*");
  tabsList.value?.forEach(async (item) => {
    const imagePath = `/public/img/${item.icon}.png`;
    const imagePathAct = `/public/img/${item.actIcon}.png`;
    const imageUrl = await images[imagePath]();
    const imageUrlAct = await images[imagePathAct]();
    item.icon = imageUrl.default;
    item.actIcon = imageUrlAct.default;
  });
};

/**
 * 获取详情
 */
const details = ref({});
const getDetail = async () => {
  const res = await getDetails({ id });
  details.value = res;
};
onMounted(async () => {
  loadImage();
  await getDetail();
  if (tabs) {
    currentNavIndex.value = tabs;
  }
});
</script>
<style scope lang="less">
.subject-box {
  background: #cbebde;
  min-height: 100vh;
  .wind-1240 {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 30px;
    * {
      box-sizing: border-box;
    }
    .title-bar {
      margin: 30px 0;
      text-align: center;
      font-size: 22px;
      font-weight: bold;
      width: 100%;
      background: #fff;
      padding: 30px 20px;
      border-radius: 30px;
      color: #217300;
      position: relative;
      .el-button {
        position: absolute;
        right: 20px;
        top: 20px;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        height: 40px;
        border-radius: 20px;
      }
    }
    .cloud-disk {
      box-sizing: border-box;
    }

    .cloud-disk-left {
      width: 280px;
      overflow-x: hidden;
      overflow-y: auto;
      margin-right: 20px;
      border-radius: 10px;
    }
    .cloud-disk-right {
      width: calc(100% - 300px);
      height: 100%;
      padding: 10px 30px 30px;
      border-radius: 10px;
      box-sizing: border-box;
      background: #fff;
      min-height: 500px;
    }

    /* 左边菜单样式开始 */
    .serach {
      background-color: #fff;
    }

    .displayFlex2 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    .nav-list {
      width: 100%;
      overflow-y: auto;
      padding: 10px 20px;
      .nav-item {
        display: flex;
        align-items: center;
        color: #666;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-top: 13px;
        margin-bottom: 13px;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 16px;
        font-weight: bold;
        border-radius: 20px;
        img {
          width: 20px;
          height: 20px;
          margin-right: 15px;
        }
        span {
          display: block;
          width: 70px;
        }
      }
    }
    .nav-list .nav-item:hover {
      color: #207402;
      background: #dbf1da;
      font-weight: bold;
    }

    .nav-list .nav-item-active {
      color: #207402;
      background: #dbf1da;
      font-weight: bold;
      span {
        color: #207402;
      }
      i {
        color: #207402;
      }
    }

    /* 右边文件显示样式开始 */
    .folder-name {
      margin-left: 10px;
      cursor: pointer;
    }
    .folder-name:hover {
      border-bottom: 1px solid #606266;
    }

    /* 右边文件显示样式结束 */
    /* 去掉input的聚焦样式 */
    input:focus {
      outline: none;
      border-color: #207402;
      box-shadow: 0 0 5px #ffffff;
      border-radius: 5px;
    }

    /* 复选框对齐 */
    .cloud-disk-table /deep/ .el-table-column--selection > .cell {
      padding-left: 15px !important;
    }
    .cloud-disk-table /deep/ .el-table-column--selection > .cell .el-checkbox {
      margin-bottom: 0 !important;
    }

    /* 文件数量提示 */
    .file-num {
      text-align: right;
      padding-right: 20px;
      color: #b6b6b6;
    }

    .main-list {
      min-height: 228px;
      .main-list-item {
        display: flex;
        align-items: center;
        padding: 10px;
        cursor: pointer;
        border-bottom: 1px solid #eee;
      }
      .main-list-item:hover {
        background-color: #f5f5f5;
      }
      .trainee-info {
        flex: 2;
        margin-left: 30px;
        & > img {
          width: 30px;
          height: 30px;
          margin-right: 15px;
        }
      }
    }
  }
}
</style>
